import { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { getweicsc, addweishingc, getUser2Djm } from "../api/api";
import "../shingc.css";
function Details() {
  const [list, setList] = useState([]);
  const [nero, setnero] = useState("");
  const [users, setsuers] = useState({});
  const [isBig, setIsBig] = useState(false);
  let { state } = useLocation();
  const navigate = useNavigate();
  //点击放大
  const handleClick = () => {
    setIsBig(!isBig);
  };
  let user = sessionStorage.getItem("user");
  useEffect(() => {
    //获取数据
    getweishing();
    getUser2Djm(user).then((res) => {
      setsuers(res.data);
    });
  }, []);
  function getweishing() {
    getweicsc().then((res) => {
      let data = res.data.map((v) => {
        v.nero = JSON.parse(v.nero);
        return v;
      });
      let detail = data.filter((v) => v.id == state.id);
      if (res.code == 200) {
        setList([...detail]);
        console.log(detail);
      }
    });
  }
  //跳转
  function dianji(url, id) {
    console.log(url);
    navigate(url, {
      state: {
        id: id,
      },
    });
  }
  return (
    <div >
      <img
        src="../img/shingc/jiantou.png"
        className="image"
        onClick={() => {
          dianji("/shichang");
        }}
      ></img>
      <div className="shingc" >市场详情</div>
      <div className="naro">
        <div>
          {list.map((item) => {
            return (
              <div key={item.id}>
                <div className="jianqian">{item.jiang}</div>
                <div className="tagex">{item.tagex}</div>
                <div className="tagex1">{item.tagex1}</div>
                <div>
                  <img
                    src={item.img}
                    style={{
                      width: isBig ? "400px" : "600px",
                      height: isBig ? "400px" : "600px",
                    }}
                    onClick={handleClick}
                    className="img"
                  ></img>
                  <img src={item.img} className="img1"></img>
                </div>

                <div className="lyan">
                  <div className="loyan">留言</div>
                  {item.nero.map((v, i) => {
                    return (
                      <div key={i} className="loyancolor">
                        <div className="qlpu">
                          <img src={v.img} className="imgtox"></img>

                          <div className="names">{v.name1}</div>
                          <div className="nero">{v.val}</div>
                          <div className="dates">{v.dates}</div>
                        </div>
                      </div>
                    );
                  })}

                  <div className="text">
                    <input
                      type="text"
                      value={nero}
                      placeholder="说点什么吧"
                      onChange={(e) => {
                        setnero(e.target.value.trim());
                      }}
                    ></input>
                    <button
                      onClick={() => {
                        if (nero) {
                          let obj = {
                            name1: users.userName,
                            val: nero,
                            dates: new Date()
                              .toLocaleString()
                              .replaceAll("/", "-"),
                            img: users.img ? users.img : "",
                          };
                          item.nero.unshift(obj);
                          addweishingc({
                            id: item.id,
                            nero: JSON.stringify(item.nero),
                          }).then((res) => {
                            console.log(res);
                            getweishing();
                            setnero("");
                          });
                        }
                      }}
                    >
                      发送
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
export default Details;
